<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module">
        import {
         reactive, 
         shallowReactive,
         readonly,
         shallowReadonly,
         effect,
         ref,
         toRef,
         toRefs,
         computed,
         } from './index.js'


        //  computed ref + effect(lazy) + scheduler + 缓存

        const age = ref(18)
        const computedAge = computed(() => {
            console.log('computed')
            return age.value + 10
        })
        // console.log(computedAge.value) //ref
        // console.log(computedAge.value) // 缓存

        // age.value = 100 //更新age,computedAge不会立即重新计算
        // computedAge.value // scheduler

        effect(() => {
            // 需要重新执行
            // 但没有使用到age属性
            // 所以【访问value存取器的时候，需要将其依赖的值收集起来】
            console.log(computedAge.value) 
        })
        // age.value = 500


    </script>
</body>
</html>